<!-- eslint-disable eol-last -->
<template>
  <div>
    <el-collapse v-model="activeNames" class="unit-collapse">
      <el-collapse-item
        v-for="group in units"
        :key="group.groupName"
        :name="group.groupName"
        :title="group.title"
      >
        <draggable
          tag="ul"
          :list="group.units"
          :group="{ name: 'dragGroup', pull: 'clone', put: false }"
          :clone="handleFieldUnitClone"
          ghost-class="ghost"
          :sort="false"
          :move="checkContainerMove"
        >
          <li
            v-for="(unit, index) in group.units"
            :key="index"
            class="container-unit-item"
            :title="unit.title"
            @dblclick="addUnitByDbClick(unit)"
          >
            <span>
              <svg-icon :icon-class="unit.icon" class-name="color-svg-icon" />
              {{ unit.title }}
            </span>
          </li>
        </draggable>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable eol-last */
import { units } from "./unitConfig";
import Draggable from "vuedraggable";
import SvgIcon from "Yan/components/svg-icon";
export default {
  components: { Draggable, SvgIcon },
  props: {
    designer: Object,
  },
  data() {
    return {
      units,
      activeNames: units.map((i) => i.groupName),
    };
  },
  methods: {
    handleFieldUnitClone(unit) {
      const newCon = this.designer.copyNewFieldUnit(unit);
      this.designer.addFieldLib(newCon);
      // 添加入设计树
      let unitItem = newCon.id;
      // console.log("unit_panel", "handleFieldUnitClone", newCon);
      if (unit.group === "container") {
        unitItem = { id: newCon.id, children: [] };
      }
      this.designer.setSelected(newCon.id);
      return unitItem;
    },
    addUnitByDbClick(unit) {
      this.designer.addUnitByDbClick(unit);
    },
    checkContainerMove() {
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../styles/global.scss";
::v-deep {
  .unit-collapse {
    border-top-width: 0;

    .el-collapse-item__header {
      margin-left: 8px;
      // font-style: italic;
      font-weight: bold;
    }

    .el-collapse-item ul > li {
      list-style: none;
    }

    .el-collapse-item__content {
      padding-bottom: 6px;

      ul {
        padding-left: 10px; /* 重置IE11默认样式 */
        margin: 0; /* 重置IE11默认样式 */
        margin-block-start: 0;
        margin-block-end: 0.25em;
        padding-inline-start: 10px;

        &:after {
          content: "";
          display: block;
          clear: both;
        }

        .container-unit-item,
        .field-unit-item {
          display: block;
          height: 32px;
          line-height: 32px;
          width: 98px;
          float: left;
          text-align: left !important;
          margin: 2px 6px 6px 0;
          cursor: move;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          background: #fff;
          border: 1px solid #e8e9eb;
          border-radius: 4px;
          padding: 0 8px;
          user-select: none;
        }

        .container-unit-item:hover,
        .field-unit-item:hover {
          background: #f1f2f3;
          border-color: $--color-primary;

          .color-svg-icon {
            color: $--color-primary;
          }
        }

        .drag-handler {
          position: absolute;
          top: 0;
          left: 160px;
          background-color: #dddddd;
          border-radius: 5px;
          padding-right: 5px;
          font-size: 11px;
          color: #666666;
        }
      }
    }
  }
}
</style>